<template>
  <view class="app-container ver-layout">
    <!-- 其他信息   -->
    <u-form :model="form" ref="uForm" label-width="107px" :label-style="formLabel">
      <u-form-item label="学员姓名">
        <u-input v-model="form.realname" placeholder="请输入学员姓名" :maxlength="10"/>
      </u-form-item>
      <u-form-item label="性 别">
        <u-radio-group v-model="form.sex">
          <u-radio v-for="(item, index) in radioList" :key="index" :name="item.value" active-color="#42B4AB">
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="联系电话">
        <u-input v-model="form.phone" type="number" placeholder="请输入联系电话" :maxlength="11"/>
      </u-form-item>
      <u-form-item label="家长关系">
        <view class="form-select-item hor-layout-center" @click="form.showAppellation=true">
          <view class="form-select-text single-line">{{ form.appellationObj.label ? form.appellationObj.label : '请选择' }}
          </view>
          <u-icon name="arrow-right" color="#000000"></u-icon>
        </view>
        <u-select v-model="form.showAppellation" :list="appellationList" title="选择家长关系"
                  :default-value="form.appellationObj.value"
                  @confirm="confirmSelectValue($event,'appellationList','appellationObj','appellation')"></u-select>
      </u-form-item>
      <u-form-item label="出生日期">
        <view class="form-select-item hor-layout-center" @click="form.showTime=true">
          <view class="form-select-text">{{ form.birthday ? form.birthday : '请选择' }}</view>
          <u-icon name="arrow-right" color="#999999"></u-icon>
          <u-picker v-model="form.showTime" :params="timePara" :default-time="form.birthday"
                    title="选择出生日期" @confirm="selectTime"></u-picker>
        </view>
      </u-form-item>
      <u-form-item label="来源渠道">
        <view class="form-select-item hor-layout-center" @click="form.showChannel=true">
          <view class="form-select-text">{{ form.channelObj.label ? form.channelObj.label : '请选择' }}</view>
          <u-icon name="arrow-right" color="#000000"></u-icon>
        </view>
        <u-select v-model="form.showChannel" :list="channelList" title="选择来源渠道" :default-value="form.channelObj.value"
                  @confirm="confirmSelectValue($event,'channelList','channelObj','channel_id')"></u-select>
      </u-form-item>
      <u-form-item label="意向度">
        <view class="form-select-item hor-layout-center" @click="form.showIntentionLevel=true">
          <view class="form-select-text single-line">
            {{ form.intentionLevelObj.label ? form.intentionLevelObj.label : '请选择' }}
          </view>
          <u-icon name="arrow-right" color="#000000"></u-icon>
        </view>
        <u-select v-model="form.showIntentionLevel" :list="intentionLevels" title="选择意向度"
                  :default-value="form.intentionLevelObj.value"
                  @confirm="confirmSelectValue($event,'intentionLevels','intentionLevelObj','intention_level')"></u-select>
      </u-form-item>
      <u-form-item label="意向课程">
        <view class="form-select-item hor-layout-center" @click="form.showIntentionCourse=true">
          <view class="form-select-text single-line">
            {{ form.intentionCourseObj.label ? form.intentionCourseObj.label : '请选择' }}
          </view>
          <u-icon name="arrow-right" color="#000000"></u-icon>
        </view>
        <u-select v-model="form.showIntentionCourse" :list="courseList" title="选择意向课程"
                  :default-value="form.intentionCourseObj.value" @confirm="confirmSelectCourse"></u-select>
      </u-form-item>
      <u-form-item label="顾 问">
        <view class="form-select-item hor-layout-center" @click="toSelectAdviser">
          <view class="form-select-text">{{ form.adviserObj.name ? form.adviserObj.name : '请选择' }}</view>
          <u-icon name="arrow-right" color="#000000"></u-icon>
        </view>
      </u-form-item>
      <u-form-item label="所在学校">
        <u-input v-model="form.school" placeholder="请输入当前所在学校" :maxlength="20"/>
      </u-form-item>
      <u-form-item label="家庭住址">
        <u-input v-model="form.home_address" placeholder="请输入家庭住址" :maxlength="30"/>
      </u-form-item>
    </u-form>
    <view class="submit-view" @click="saveStudentInfo">保存</view>
  </view>
</template>

<script>
import {intentStudent, staffList, addIntentStudent} from "@/router.js"
import {AddIntentStudentApi} from "@/api/intentStudent.js"

let engine = new AddIntentStudentApi()
export default {
  name: "addIntentStudent",
  data() {
    return {
      timePara: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      },
      formLabel: {
        color: "#282828",
        fontSize: '15px',
        textAlign: 'justify',
        textAlignLast: 'justify',
        display: 'inline-block',
        paddingRight: '27px'
      },
      form: {
        realname: '',
        phone: '',
        appellation: '',
        appellationObj: {},
        sex: 1,
        birthday: '',
        channel_id: '',
        channelObj: {},//渠道对象
        intention_level: '',
        intentionLevelObj: {},//意向度对象
        intention_course: '',
        intentionCourseObj: {},
        adviser: '',
        adviserObj: {},
        school: '',
        home_address: '',
        remark: '',
        showAppellation: false,
        showTime: false,
        showChannel: false,
        showIntentionLevel: false,
        showIntentionCourse: false,
        showAdviser: false
      },
      appellationList: [],
      channelList: [],
      intentionLevels: [{label: '一般', value: 1}, {label: '中等', value: 2}, {label: '强烈', value: 3}],
      courseList: [],
      adviserList: [],
      radioList: [{name: "男", value: 1}, {name: "女", value: 2}]
    }
  },
  computed: {
    getSelectCourse() {
      let {value} = this.form.course
      return [value]
    }
  },
  onLoad() {
    this.getChannelList()
    this.getContactList()
    this.getCourseList()
  },
  methods: {
    getChannelList() {
      engine.getChannelList().then(res => {
        this.channelList = res.data.map(item => {
          return {value: item.id, label: item.name}
        })
      })
    },
    getContactList() {
      engine.getAppellations().then(res => {
        this.appellationList = res.data.map(item => {
          return {value: item.id, label: item.name}
        })
      })
    },
    getCourseList() {
      engine.getCourseList().then(res => this.courseList = res.data)
    },
    selectTime(e) {
      this.form.birthday = ''
      let {year, month, day, hour, minute, second} = this.timePara
      if (year) this.form.birthday += e.year;
      if (month) this.form.birthday += '-' + e.month;
      if (day) this.form.birthday += '-' + e.day;
      if (hour) this.form.birthday += ' ' + e.hour;
      if (minute) this.form.birthday += ':' + e.minute;
      if (second) this.form.birthday += ':' + e.second;
    },
    confirmSelectValue(e, listName, objName, objId) {
      console.log("confirmSelectValue", e, listName, objName)
      let channelIndex = this[listName].findIndex(item => item.value === e[0].value)
      this.form[objName].value = [channelIndex]
      this.form[objName].label = e[0].label
      this.form[objId] = e[0].value
    },
    confirmSelectCourse(e) {
      console.log("confirmSelectCourse", e)
      let courseIndex = this.courseList.findIndex(item => item.value === e[0].value)
      this.form.intentionCourseObj.value = [courseIndex]
      this.form.intentionCourseObj.label = e[0].label
      this.form.intention_course = e[0].value
    },
    toSelectAdviser() {
      this.$u.route({url: staffList, params: {from: addIntentStudent}})
    },
    confirmSelectAdviser(adObj) {
      this.form.adviser = adObj.id
      this.form.adviserObj = adObj
    },
    saveStudentInfo() {
      engine.addIntentStudent(this.form).then(res => {
        console.log("saveStudentInfo", res)
        if (res.code === 200) {
          this.$u.toast("添加成功！")
          this.$u.pageCallBackDelay(intentStudent, 'refreshData', '')
          this.$u.routeDelay({type: 'back'})
        }
      })
    }
  }
}
</script>

<style scoped>
.photo-layout {
  padding-bottom: 25rpx;
  border-bottom: 1px solid #E5E5E5;
}

.photo-view {
  width: 118rpx;
  height: 146rpx;
  background: #D1D1D1;
}

.photo-image {
  width: 100%;
  height: 100%
}

.upload-view {
  margin-left: 50rpx;
  font-size: 30rpx;
  color: #333333;
  font-family: Source Han Sans CN;
}


.submit-view {
  margin: auto;
  margin-top: 15px;
  height: 36px;
  line-height: 36px;
  width: 70%;
  text-align: center;
  background: #42B4AB;
  border-radius: 18px;
  /* 文本样式 */
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
}

.form-select-item {
  width: 100%;
}

.form-select-text {
  flex: 1;
  width: 0;
  margin-right: 3px;
  text-align: right;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}

.student-desc-title {
  margin-top: 15px;
  font-size: 15px;
  color: #282828;
}

.student-desc-input {
  min-height: 150px;
  margin-top: 12px;
  background: #EFEFEF;
}
</style>
